import './App.css';
import React, { lazy } from 'react'
import { HashRouter as Router,Switch,Route,Redirect } from 'react-router-dom'
import NotFound from './pages/404/NotFound'  // 404页面
import Layout from './pages/Layout' // 二级页面路由页面
import Login from './pages/Login' // 登录页面
import MapFound from './pages/MapFound'  //百度地图
import My from './pages/My'  // 个人中心
import HouseDetail from './pages/HouseDetail/index'  // 个人中心

import Search from './pages/Search'
import Citylist from './pages/Citylist'
// import Dome from '../src/dome/TabBar/5.33-tar/tabbar'  //dome
import TabBarExample from '../src/dome/TabBar/3.0-tar/index'  //dome
import Favorite from './pages/Favorite'
// 这个是自己封装的鉴权路由
import AuthRoute from './components/AuthRoute'

import Rent from './pages/Rent' // 登录页面
import RentAdd from './pages/Rent/Add' // 登录页面
import RentSearch from './pages/Rent/Search' // 登录页面

// 使用动态组件的方式导入组件：
// const Rent = lazy(() => import('./pages/Rent'))
// const RentAdd = lazy(() => import('./pages/Rent/Add'))
// const RentSearch = lazy(() => import('./pages/Rent/Search'))
function App() {
  return (
    <div className="App">
        <Router>
          <Switch>
             {/* 房源详情的路由规则： */}
             <Route path="/login" component={Login}></Route> {/* 登录页面 */}
             {/* Home 组件是父路由的内容 */}
            <Route path="/home" component={Layout}></Route> {/* 首页 */}
            <Route path="/map" component={My}></Route> {/* 个人中心 */}
            <Route path="/mapFound" component={MapFound}></Route> {/* 百度地图*/}
            <Route path="/dome1" component={TabBarExample}></Route> {/* 测试使用 */}
            {/* <Route path="/dome" component={Dome}></Route> 测试使用 */}
            {/* 配置登录后，才能访问的页面 */}
            <Route path="/search" component={Search}></Route> {/* 搜索*/}
            <Route path="/citylist" component={Citylist}></Route> {/* 城市选择*/}
            <Route path="/details/:id" component={HouseDetail}></Route> {/* 房屋详情页*/}
            {/* Redirect重定向规则，卸载已有规则的后面 */}
            <Redirect exact from='/' to='/home' />
            {/* 以下是调用自己封装的鉴权路由 */}
            <AuthRoute path="/favorite" component={Favorite}></AuthRoute>
            {/* 我的 */}
            <AuthRoute exact path="/rent" component={Rent} />     {/* 我的出租 */}
            <AuthRoute path="/rent/add" component={RentAdd} />    {/* 发不房源 */}
            <AuthRoute path="/rent/search" component={RentSearch} />
             {/* 404页面 */}
            <Route path='*' component={NotFound}></Route> 
          </Switch>
        </Router>

    </div>
  );
}

export default App;
